<template>
  <div class="bg-gray-200 flex flex-no-wrap">
    <!-- Sidebar starts -->
    <div
      class="w-64 min-h-screen sticky top-0 bg-blue-900 shadow md:h-full flex-col justify-between hidden sm:flex"
    >
      <div>
        <div class="h-16 w-full flex items-center px-8">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="144"
            height="30"
            viewBox="0 0 144 30"
          >
            <path
              fill="#5F7DF2"
              d="M80.544 9.48c1.177 0 2.194.306 3.053.92.86.614 1.513 1.45 1.962 2.507.448 1.058.673 2.247.673 3.568 0 1.303-.233 2.473-.699 3.51-.465 1.037-1.136 1.851-2.012 2.444-.876.592-1.885.888-3.028.888-1.405 0-2.704-.554-3.897-1.663v4.279h2.64v3.072h-9.14v-3.072h2.26V12.78H70.45V9.657h6.145v1.663l.209-.21c1.123-1.087 2.369-1.63 3.74-1.63zm17.675 0c1.176 0 2.194.306 3.053.92.859.614 1.513 1.45 1.961 2.507.449 1.058.673 2.247.673 3.568 0 1.303-.233 2.473-.698 3.51-.466 1.037-1.136 1.851-2.012 2.444-.876.592-1.886.888-3.028.888-1.405 0-2.704-.554-3.898-1.663v4.279h2.64v3.072h-9.14v-3.072h2.26V12.78h-1.904V9.657h6.144v1.663l.21-.21c1.122-1.087 2.368-1.63 3.739-1.63zM24.973 1c1.13 0 2.123.433 2.842 1.133 0 .004 0 .008.034.012 1.54 1.515 1.54 3.962-.034 5.472-.035.029-.069.058-.069.089-.719.65-1.712 1.05-2.773 1.05-.719 0-1.37.061-1.985.184-2.363.474-3.8 1.86-4.28 4.13-.114.489-.18 1.02-.2 1.59l-.003.176.001-.034.002.034c.022.505-.058 1.014-.239 1.495l-.076.182.064-.157c.106-.28.18-.575.217-.881l.008-.084-.026.195c-.286 1.797-1.858 3.188-3.754 3.282l-.204.005h-.103l-.103.002h-.034c-.65.012-1.232.072-1.78.181-2.328.473-3.765 1.863-4.279 4.139-.082.417-.142.863-.163 1.339l-.008.362v.23c0 2.02-1.603 3.681-3.661 3.861L4.16 29l-.48-.01c-.958-.073-1.849-.485-2.499-1.113-1.522-1.464-1.573-3.808-.152-5.33l.152-.154.103-.12c.719-.636 1.677-1.026 2.704-1.026.754 0 1.404-.062 2.02-.184 2.362-.475 3.8-1.86 4.28-4.126.136-.587.17-1.235.17-1.942 0-.991.411-1.896 1.027-2.583.069-.047.137-.097.172-.15.068-.051.102-.104.17-.159.633-.564 1.498-.925 2.408-.978l.229-.007h.034c.068 0 .171.003.274.009.616-.014 1.198-.074 1.746-.18 2.328-.474 3.766-1.863 4.279-4.135.082-.44.142-.912.163-1.418l.008-.385v-.132c0-2.138 1.78-3.872 4.005-3.877zm-.886 10c1.065 0 1.998.408 2.697 1.073.022.011.03.024.042.036l.025.017v.015c1.532 1.524 1.532 3.996 0 5.52-.034.03-.067.06-.067.09-.7.655-1.665 1.056-2.697 1.056-.7 0-1.332.062-1.932.186-2.298.477-3.696 1.873-4.163 4.157-.133.591-.2 1.242-.2 1.95 0 1.036-.399 1.975-1.032 2.674l-.1.084c-.676.679-1.551 1.055-2.441 1.13l-.223.012-.366-.006c-.633-.043-1.3-.254-1.865-.632-.156-.096-.296-.201-.432-.315l-.2-.177v-.012c-.734-.735-1.133-1.72-1.133-2.757 0-2.078 1.656-3.793 3.698-3.899l.198-.005h.133c.666-.007 1.266-.069 1.832-.185 2.265-.476 3.663-1.874 4.163-4.161.08-.442.139-.916.159-1.424l.008-.387v-.136c0-2.153 1.731-3.899 3.896-3.904zm3.882 11.025c1.375 1.367 1.375 3.583 0 4.95s-3.586 1.367-4.96 0c-1.345-1.367-1.345-3.583 0-4.95 1.374-1.367 3.585-1.367 4.96 0zm94.655-12.672c1.405 0 2.628.323 3.669.97 1.041.648 1.843 1.566 2.406 2.756.563 1.189.852 2.57.87 4.145h-9.954l.03.251c.132.906.476 1.633 1.03 2.18.605.596 1.386.895 2.343.895 1.058 0 2.09-.525 3.097-1.574l3.301 1.066-.203.291c-.69.947-1.524 1.67-2.501 2.166-1.075.545-2.349.818-3.821.818-1.473 0-2.774-.277-3.904-.831-1.13-.555-2.006-1.34-2.628-2.355-.622-1.016-.933-2.21-.933-3.58 0-1.354.324-2.582.971-3.682s1.523-1.961 2.628-2.583c1.104-.622 2.304-.933 3.599-.933zm13.955.126c1.202 0 2.314.216 3.339.648v-.47h3.034v3.91h-3.034l-.045-.137c-.317-.848-1.275-1.272-2.875-1.272-1.21 0-1.816.339-1.816 1.016 0 .296.161.516.483.66.321.144.791.262 1.409.355 1.735.22 3.102.536 4.1.946 1 .41 1.697.919 2.095 1.524.398.605.597 1.339.597 2.202 0 1.405-.48 2.5-1.441 3.282-.96.783-2.266 1.174-3.917 1.174-1.608 0-2.7-.321-3.275-.964V23h-3.098v-4.596h3.098l.032.187c.116.547.412.984.888 1.311.53.364 1.183.546 1.962.546.762 0 1.324-.087 1.688-.26.364-.174.546-.476.546-.908 0-.296-.076-.527-.228-.692-.153-.165-.447-.31-.883-.438-.435-.127-1.102-.27-2-.431-1.997-.313-3.433-.82-4.31-1.517-.875-.699-1.313-1.64-1.313-2.825 0-1.21.455-2.162 1.365-2.856.91-.695 2.11-1.042 3.599-1.042zm-69.164.178v10.27h1.98V23h-8.24v-3.072h2.032V12.78h-2.031V9.657h6.259zm-16.85-5.789l.37.005c1.94.05 3.473.494 4.6 1.335 1.198.892 1.797 2.185 1.797 3.878 0 1.168-.273 2.15-.819 2.945-.546.796-1.373 1.443-2.482 1.943l3.085 5.776h2.476V23h-5.827l-4.317-8.366h-2.183v5.116h2.4V23H39.646v-3.25h2.628V7.118h-2.628v-3.25h10.918zm61.329 0v16.06h1.892V23h-8.24v-3.072h2.082v-13h-2.082v-3.06h6.348zm-32.683 9.04c-.812 0-1.462.317-1.949.951-.486.635-.73 1.49-.73 2.565 0 1.007.252 1.847.756 2.52.503.673 1.161 1.01 1.974 1.01.838 0 1.481-.312 1.93-.934.448-.622.672-1.504.672-2.647 0-1.092-.228-1.942-.685-2.552-.457-.61-1.113-.914-1.968-.914zm17.675 0c-.813 0-1.463.317-1.95.951-.486.635-.73 1.49-.73 2.565 0 1.007.253 1.847.756 2.52.504.673 1.162 1.01 1.974 1.01.838 0 1.481-.312 1.93-.934.449-.622.673-1.504.673-2.647 0-1.092-.229-1.942-.686-2.552-.457-.61-1.113-.914-1.967-.914zM14.1 0C16.267 0 18 1.743 18 3.894v.01c0 2.155-1.733 3.903-3.9 3.903-4.166 0-6.3 2.133-6.3 6.293 0 2.103-1.667 3.817-3.734 3.9l-.5-.009c-.933-.075-1.8-.49-2.433-1.121C.4 16.134 0 15.143 0 14.1c0-2.144 1.733-3.903 3.9-3.903 4.166 0 6.3-2.133 6.3-6.294C10.2 1.751 11.934.005 14.1 0zm108.32 12.184c-.76 0-1.372.22-1.834.66-.46.44-.75 1.113-.87 2.018h5.561c-.118-.795-.442-1.44-.97-1.936-.53-.495-1.158-.742-1.886-.742zM49.525 7.118h-2.26v4.444h1.829c2.023 0 3.034-.754 3.034-2.26 0-.728-.233-1.274-.698-1.638-.466-.364-1.1-.546-1.905-.546zm15.821-3.593c.635 0 1.183.231 1.644.692.462.462.692 1.01.692 1.644 0 .677-.23 1.238-.692 1.682-.46.445-1.009.667-1.644.667-.643 0-1.195-.23-1.656-.692-.462-.461-.692-1.013-.692-1.657 0-.634.23-1.182.692-1.644.46-.461 1.013-.692 1.656-.692zM5.991 1.171c1.345 1.563 1.345 4.095 0 5.658-1.374 1.561-3.585 1.561-4.96 0-1.375-1.563-1.375-4.095 0-5.658 1.375-1.561 3.586-1.561 4.96 0z"
            />
          </svg>
        </div>
        <ul class="mt-12">
          <router-link to="/">
            <li
              class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center py-3 px-8"
            >
              <div class="flex items-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-grid"
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <rect x="4" y="4" width="6" height="6" rx="1" />
                  <rect x="14" y="4" width="6" height="6" rx="1" />
                  <rect x="4" y="14" width="6" height="6" rx="1" />
                  <rect x="14" y="14" width="6" height="6" rx="1" />
                </svg>
                <span class="text-sm ml-2">Dashboard</span>
              </div>
            </li>
          </router-link>
          <router-link to="/file-manager">
            <li
              class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center px-8 py-3"
            >
              <div class="flex items-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-puzzle"
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <path
                    d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1"
                  />
                </svg>
                <span class="text-sm ml-2">File Manager</span>
              </div>
            </li>
          </router-link>
          <router-link to="/posts">
            <li
              class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center px-8 py-3"
            >
              <div class="flex items-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-compass"
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <polyline points="8 16 10 10 16 8 14 14 8 16" />
                  <circle cx="12" cy="12" r="9" />
                </svg>
                <span class="text-sm ml-2">Posts</span>
              </div>
            </li>
          </router-link>
          <router-link to="/tickets">
            <li
              class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center px-8 py-3"
            >
              <div class="flex items-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-code"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <polyline points="7 8 3 12 7 16" />
                  <polyline points="17 8 21 12 17 16" />
                  <line x1="14" y1="4" x2="10" y2="20" />
                </svg>
                <span class="text-sm ml-2">Tickets</span>
              </div>
            </li>
          </router-link>
          <router-link to="/users">
            <li
              class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center px-8 py-3"
            >
              <div class="flex items-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-puzzle"
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <path
                    d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1"
                  />
                </svg>
                <span class="text-sm ml-2">Users</span>
              </div>
            </li>
          </router-link>
          <router-link to="/settings">
            <li
              class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center px-8 py-3"
            >
              <div class="flex items-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-settings"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <path
                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                  />
                  <circle cx="12" cy="12" r="3" />
                </svg>
                <span class="text-sm ml-2">Settings</span>
              </div>
            </li>
          </router-link>
        </ul>
      </div>

      <div>
        <div class="flex items-center mt-32 mb-4 px-8">
          <div class="w-10 h-10 bg-cover rounded-md mr-3">
            <img
              src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_5.png"
              alt=""
              class="rounded-full h-full w-full overflow-hidden shadow"
            />
          </div>
          <div>
            <p class="text-gray-400 text-sm font-medium">Steve Doe</p>
            <p class="text-gray-400 text-xs">View Profile</p>
          </div>
        </div>
        <div class="px-8 bg-blue-800">
          <ul class="w-full flex items-center justify-between">
            <li class="cursor-pointer text-white pt-5 pb-3">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-bell"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z"></path>
                <path
                  d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"
                ></path>
                <path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>
              </svg>
            </li>
            <li class="cursor-pointer text-white pt-5 pb-3">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-messages"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z"></path>
                <path
                  d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"
                ></path>
                <path
                  d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"
                ></path>
              </svg>
            </li>
            <li class="cursor-pointer text-white pt-5 pb-3">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-settings"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z"></path>
                <path
                  d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                ></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
            </li>
            <li class="cursor-pointer text-white pt-5 pb-3">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-archive"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z"></path>
                <rect x="3" y="4" width="18" height="4" rx="2"></rect>
                <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10"></path>
                <line x1="10" y1="12" x2="14" y2="12"></line>
              </svg>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div
      class="w-56 z-40 absolute sm:relative md:h-full flex-col justify-between sm:hidden transition duration-150 ease-in-out"
      id="mobile-nav"
    >
      <div
        id="closeSideBar"
        class="h-10 hidden w-10 bg-indigo-900 absolute right-0 mt-16 -mr-10 flex items-center shadow rounded-tr rounded-br justify-center cursor-pointer text-white"
        v-on:click="sidebarHandler()"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="icon icon-tabler icon-tabler-x"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" />
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </div>
      <div class="flex">
        <div id="menuList" class="bg-indigo-900">
          <div class="">
            <div class="h-16 w-full flex items-center px-8">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="144"
                height="30"
                viewBox="0 0 144 30"
              >
                <path
                  fill="#5F7DF2"
                  d="M80.544 9.48c1.177 0 2.194.306 3.053.92.86.614 1.513 1.45 1.962 2.507.448 1.058.673 2.247.673 3.568 0 1.303-.233 2.473-.699 3.51-.465 1.037-1.136 1.851-2.012 2.444-.876.592-1.885.888-3.028.888-1.405 0-2.704-.554-3.897-1.663v4.279h2.64v3.072h-9.14v-3.072h2.26V12.78H70.45V9.657h6.145v1.663l.209-.21c1.123-1.087 2.369-1.63 3.74-1.63zm17.675 0c1.176 0 2.194.306 3.053.92.859.614 1.513 1.45 1.961 2.507.449 1.058.673 2.247.673 3.568 0 1.303-.233 2.473-.698 3.51-.466 1.037-1.136 1.851-2.012 2.444-.876.592-1.886.888-3.028.888-1.405 0-2.704-.554-3.898-1.663v4.279h2.64v3.072h-9.14v-3.072h2.26V12.78h-1.904V9.657h6.144v1.663l.21-.21c1.122-1.087 2.368-1.63 3.739-1.63zM24.973 1c1.13 0 2.123.433 2.842 1.133 0 .004 0 .008.034.012 1.54 1.515 1.54 3.962-.034 5.472-.035.029-.069.058-.069.089-.719.65-1.712 1.05-2.773 1.05-.719 0-1.37.061-1.985.184-2.363.474-3.8 1.86-4.28 4.13-.114.489-.18 1.02-.2 1.59l-.003.176.001-.034.002.034c.022.505-.058 1.014-.239 1.495l-.076.182.064-.157c.106-.28.18-.575.217-.881l.008-.084-.026.195c-.286 1.797-1.858 3.188-3.754 3.282l-.204.005h-.103l-.103.002h-.034c-.65.012-1.232.072-1.78.181-2.328.473-3.765 1.863-4.279 4.139-.082.417-.142.863-.163 1.339l-.008.362v.23c0 2.02-1.603 3.681-3.661 3.861L4.16 29l-.48-.01c-.958-.073-1.849-.485-2.499-1.113-1.522-1.464-1.573-3.808-.152-5.33l.152-.154.103-.12c.719-.636 1.677-1.026 2.704-1.026.754 0 1.404-.062 2.02-.184 2.362-.475 3.8-1.86 4.28-4.126.136-.587.17-1.235.17-1.942 0-.991.411-1.896 1.027-2.583.069-.047.137-.097.172-.15.068-.051.102-.104.17-.159.633-.564 1.498-.925 2.408-.978l.229-.007h.034c.068 0 .171.003.274.009.616-.014 1.198-.074 1.746-.18 2.328-.474 3.766-1.863 4.279-4.135.082-.44.142-.912.163-1.418l.008-.385v-.132c0-2.138 1.78-3.872 4.005-3.877zm-.886 10c1.065 0 1.998.408 2.697 1.073.022.011.03.024.042.036l.025.017v.015c1.532 1.524 1.532 3.996 0 5.52-.034.03-.067.06-.067.09-.7.655-1.665 1.056-2.697 1.056-.7 0-1.332.062-1.932.186-2.298.477-3.696 1.873-4.163 4.157-.133.591-.2 1.242-.2 1.95 0 1.036-.399 1.975-1.032 2.674l-.1.084c-.676.679-1.551 1.055-2.441 1.13l-.223.012-.366-.006c-.633-.043-1.3-.254-1.865-.632-.156-.096-.296-.201-.432-.315l-.2-.177v-.012c-.734-.735-1.133-1.72-1.133-2.757 0-2.078 1.656-3.793 3.698-3.899l.198-.005h.133c.666-.007 1.266-.069 1.832-.185 2.265-.476 3.663-1.874 4.163-4.161.08-.442.139-.916.159-1.424l.008-.387v-.136c0-2.153 1.731-3.899 3.896-3.904zm3.882 11.025c1.375 1.367 1.375 3.583 0 4.95s-3.586 1.367-4.96 0c-1.345-1.367-1.345-3.583 0-4.95 1.374-1.367 3.585-1.367 4.96 0zm94.655-12.672c1.405 0 2.628.323 3.669.97 1.041.648 1.843 1.566 2.406 2.756.563 1.189.852 2.57.87 4.145h-9.954l.03.251c.132.906.476 1.633 1.03 2.18.605.596 1.386.895 2.343.895 1.058 0 2.09-.525 3.097-1.574l3.301 1.066-.203.291c-.69.947-1.524 1.67-2.501 2.166-1.075.545-2.349.818-3.821.818-1.473 0-2.774-.277-3.904-.831-1.13-.555-2.006-1.34-2.628-2.355-.622-1.016-.933-2.21-.933-3.58 0-1.354.324-2.582.971-3.682s1.523-1.961 2.628-2.583c1.104-.622 2.304-.933 3.599-.933zm13.955.126c1.202 0 2.314.216 3.339.648v-.47h3.034v3.91h-3.034l-.045-.137c-.317-.848-1.275-1.272-2.875-1.272-1.21 0-1.816.339-1.816 1.016 0 .296.161.516.483.66.321.144.791.262 1.409.355 1.735.22 3.102.536 4.1.946 1 .41 1.697.919 2.095 1.524.398.605.597 1.339.597 2.202 0 1.405-.48 2.5-1.441 3.282-.96.783-2.266 1.174-3.917 1.174-1.608 0-2.7-.321-3.275-.964V23h-3.098v-4.596h3.098l.032.187c.116.547.412.984.888 1.311.53.364 1.183.546 1.962.546.762 0 1.324-.087 1.688-.26.364-.174.546-.476.546-.908 0-.296-.076-.527-.228-.692-.153-.165-.447-.31-.883-.438-.435-.127-1.102-.27-2-.431-1.997-.313-3.433-.82-4.31-1.517-.875-.699-1.313-1.64-1.313-2.825 0-1.21.455-2.162 1.365-2.856.91-.695 2.11-1.042 3.599-1.042zm-69.164.178v10.27h1.98V23h-8.24v-3.072h2.032V12.78h-2.031V9.657h6.259zm-16.85-5.789l.37.005c1.94.05 3.473.494 4.6 1.335 1.198.892 1.797 2.185 1.797 3.878 0 1.168-.273 2.15-.819 2.945-.546.796-1.373 1.443-2.482 1.943l3.085 5.776h2.476V23h-5.827l-4.317-8.366h-2.183v5.116h2.4V23H39.646v-3.25h2.628V7.118h-2.628v-3.25h10.918zm61.329 0v16.06h1.892V23h-8.24v-3.072h2.082v-13h-2.082v-3.06h6.348zm-32.683 9.04c-.812 0-1.462.317-1.949.951-.486.635-.73 1.49-.73 2.565 0 1.007.252 1.847.756 2.52.503.673 1.161 1.01 1.974 1.01.838 0 1.481-.312 1.93-.934.448-.622.672-1.504.672-2.647 0-1.092-.228-1.942-.685-2.552-.457-.61-1.113-.914-1.968-.914zm17.675 0c-.813 0-1.463.317-1.95.951-.486.635-.73 1.49-.73 2.565 0 1.007.253 1.847.756 2.52.504.673 1.162 1.01 1.974 1.01.838 0 1.481-.312 1.93-.934.449-.622.673-1.504.673-2.647 0-1.092-.229-1.942-.686-2.552-.457-.61-1.113-.914-1.967-.914zM14.1 0C16.267 0 18 1.743 18 3.894v.01c0 2.155-1.733 3.903-3.9 3.903-4.166 0-6.3 2.133-6.3 6.293 0 2.103-1.667 3.817-3.734 3.9l-.5-.009c-.933-.075-1.8-.49-2.433-1.121C.4 16.134 0 15.143 0 14.1c0-2.144 1.733-3.903 3.9-3.903 4.166 0 6.3-2.133 6.3-6.294C10.2 1.751 11.934.005 14.1 0zm108.32 12.184c-.76 0-1.372.22-1.834.66-.46.44-.75 1.113-.87 2.018h5.561c-.118-.795-.442-1.44-.97-1.936-.53-.495-1.158-.742-1.886-.742zM49.525 7.118h-2.26v4.444h1.829c2.023 0 3.034-.754 3.034-2.26 0-.728-.233-1.274-.698-1.638-.466-.364-1.1-.546-1.905-.546zm15.821-3.593c.635 0 1.183.231 1.644.692.462.462.692 1.01.692 1.644 0 .677-.23 1.238-.692 1.682-.46.445-1.009.667-1.644.667-.643 0-1.195-.23-1.656-.692-.462-.461-.692-1.013-.692-1.657 0-.634.23-1.182.692-1.644.46-.461 1.013-.692 1.656-.692zM5.991 1.171c1.345 1.563 1.345 4.095 0 5.658-1.374 1.561-3.585 1.561-4.96 0-1.375-1.563-1.375-4.095 0-5.658 1.375-1.561 3.586-1.561 4.96 0z"
                />
              </svg>
            </div>
            <ul class="mt-12">
              <router-link to="/">
                <li
                  class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center py-3 px-8"
                >
                  <div class="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-grid"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" />
                      <rect x="4" y="4" width="6" height="6" rx="1" />
                      <rect x="14" y="4" width="6" height="6" rx="1" />
                      <rect x="4" y="14" width="6" height="6" rx="1" />
                      <rect x="14" y="14" width="6" height="6" rx="1" />
                    </svg>
                    <span class="text-sm ml-2">Dashboard</span>
                  </div>
                </li>
              </router-link>
              <router-link to="/file-manager">
                <li
                  class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center px-8 py-3"
                >
                  <div class="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-puzzle"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" />
                      <path
                        d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1"
                      />
                    </svg>
                    <span class="text-sm ml-2">File Manager</span>
                  </div>
                </li>
              </router-link>
              <router-link to="/posts">
                <li
                  class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center px-8 py-3"
                >
                  <div class="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-compass"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" />
                      <polyline points="8 16 10 10 16 8 14 14 8 16" />
                      <circle cx="12" cy="12" r="9" />
                    </svg>
                    <span class="text-sm ml-2">Posts</span>
                  </div>
                </li>
              </router-link>
              <router-link to="/tickets">
                <li
                  class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center px-8 py-3"
                >
                  <div class="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-code"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" />
                      <polyline points="7 8 3 12 7 16" />
                      <polyline points="17 8 21 12 17 16" />
                      <line x1="14" y1="4" x2="10" y2="20" />
                    </svg>
                    <span class="text-sm ml-2">Tickets</span>
                  </div>
                </li>
              </router-link>
              <router-link to="/users">
                <li
                  class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center px-8 py-3"
                >
                  <div class="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-puzzle"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" />
                      <path
                        d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1"
                      />
                    </svg>
                    <span class="text-sm ml-2">Users</span>
                  </div>
                </li>
              </router-link>
              <router-link to="/settings">
                <li
                  class="flex w-full justify-between text-gray-400 hover:text-gray-300 hover:bg-blue-800 cursor-pointer items-center px-8 py-3"
                >
                  <div class="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-settings"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" />
                      <path
                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                      />
                      <circle cx="12" cy="12" r="3" />
                    </svg>
                    <span class="text-sm ml-2">Settings</span>
                  </div>
                </li>
              </router-link>
            </ul>
            <div class="flex items-center mt-32 mb-4 px-8">
              <div class="w-10 h-10 bg-cover rounded-md mr-3">
                <img
                  src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_5.png"
                  alt
                  class="rounded-full h-full w-full overflow-hidden shadow"
                />
              </div>
              <div>
                <p class="text-gray-400 text-sm font-medium">Steve Doe</p>
                <p class="text-gray-400 text-xs">View Profile</p>
              </div>
            </div>
          </div>
          <div class="px-8 bg-blue-800">
            <ul class="w-full flex items-center justify-between">
              <li class="cursor-pointer text-white pt-5 pb-3">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-bell"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <path
                    d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"
                  />
                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
                </svg>
              </li>
              <li class="cursor-pointer text-white pt-5 pb-3">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-messages"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <path
                    d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"
                  />
                  <path
                    d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"
                  />
                </svg>
              </li>
              <li class="cursor-pointer text-white pt-5 pb-3">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-settings"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <path
                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                  />
                  <circle cx="12" cy="12" r="3" />
                </svg>
              </li>
              <li class="cursor-pointer text-white pt-5 pb-3">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-archive"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <rect x="3" y="4" width="18" height="4" rx="2" />
                  <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                  <line x1="10" y1="12" x2="14" y2="12" />
                </svg>
              </li>
            </ul>
          </div>
        </div>
        <div
          id="openSideBar"
          class="h-10 w-10 bg-indigo-900 mt-2 -mr-10 flex items-center shadow rounded-tr rounded-br justify-center cursor-pointer"
          v-on:click="sidebarHandler()"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="icon icon-tabler icon-tabler-adjustments"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="#FFFFFF"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" />
            <circle cx="6" cy="10" r="2" />
            <line x1="6" y1="4" x2="6" y2="8" />
            <line x1="6" y1="12" x2="6" y2="20" />
            <circle cx="12" cy="16" r="2" />
            <line x1="12" y1="4" x2="12" y2="14" />
            <line x1="12" y1="18" x2="12" y2="20" />
            <circle cx="18" cy="7" r="2" />
            <line x1="18" y1="4" x2="18" y2="5" />
            <line x1="18" y1="9" x2="18" y2="20" />
          </svg>
        </div>
      </div>
    </div>
    <!--Mobile responsive sidebar-->
    <!-- Sidebar ends -->
    <div class="container mx-auto py-10 md:w-8/12 lg:w-4/5 w-11/12 px-6">
      <div class="flex items-center justify-between w-full">
        <div class="w-full rounded shadow bg-white">
          <div
            class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 flex flex-col lg:flex-row lg:items-center lg:justify-between sm:shadow rounded"
          >
            <h2 class="text-gray-800 text-xl mb-4 lg:mb-0">File Manager</h2>
            <div
              class="flex flex-col lg:flex-row lg:items-center w-full sm:w-1/2 lg:justify-end"
            >
              <div class="flex flex-col lg:mr-3 mb-4 lg:mb-0">
                <label
                  for="search"
                  class="hidden text-gray-800 text-sm font-bold leading-tight tracking-normal mb-2"
                  >Search</label
                >
                <div class="relative">
                  <div
                    class="absolute text-gray-600 flex items-center pl-4 h-full cursor-pointer"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-search"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke=" currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" />
                      <circle cx="10" cy="10" r="7" />
                      <line x1="21" y1="21" x2="15" y2="15" />
                    </svg>
                  </div>
                  <input
                    id="search"
                    class="bg-gray-100 text-gray-600 focus:outline-none focus:border focus:border-blue-500 font-normal w-full sm:w-64 h-10 flex items-center pl-12 text-sm border-gray-300 rounded border"
                    placeholder="Search employees"
                  />
                </div>
              </div>
              <button
                class="flex items-center justify-center sm:justify-start font-normal bg-blue-600 transition duration-150 ease-in-out hover:bg-blue-700 focus:bg-blue-700 focus:outline-none rounded text-white px-6 py-2 text-sm"
              >
                <svg
                  id="add_icon"
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon icon-tabler icon-tabler-plus"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke=" currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <line x1="12" y1="5" x2="12" y2="19" />
                  <line x1="5" y1="12" x2="19" y2="12" />
                </svg>
                <svg
                  id="share_icon"
                  xmlns="http://www.w3.org/2000/svg"
                  class="hidden icon icon-tabler icon-tabler-share"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="6" cy="12" r="3" />
                  <circle cx="18" cy="6" r="3" />
                  <circle cx="18" cy="18" r="3" />
                  <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                  <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                </svg>
                <span id="btn_text" class="ml-2">Add Images</span>
              </button>
            </div>
          </div>
          <div class="mb-4 xl:hidden sm:mt-4 w-11/12 mx-auto relative rounded">
            <div class="absolute inset-0 m-auto mr-4 z-0 w-6 h-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-selector"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="#A0AEC0"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" />
                <polyline points="8 9 12 5 16 9" />
                <polyline points="16 15 12 19 8 15" />
              </svg>
            </div>
            <select
              aria-label="Selected tab"
              class="form-select block w-full p-3 border border-gray-300 rounded text-gray-600 appearance-none bg-transparent relative z-10"
            >
              <option selected class="text-sm text-gray-600">Images</option>
              <option class="text-sm text-gray-600">Videos</option>
              <option class="text-sm text-gray-600">Documents</option>
              <option class="text-sm text-gray-600">Shared</option>
            </select>
          </div>
          <div
            class="justify-between flex-wrap hidden sm:hidden xl:block shadow rounded"
          >
            <div class="xl:w-full xl:mx-0 pl-5 pr-5 bg-gray-100 h-12">
              <ul class="flex items-center bg-gray-100 h-full">
                <li
                  v-on:click="activeTab('images')"
                  id="images"
                  class="rounded-md bg-white text-sm text-gray-600 py-2 px-5 mr-10 font-normal hover:text-gray-800 cursor-pointer"
                >
                  Images
                </li>
                <li
                  v-on:click="activeTab('videos')"
                  id="videos"
                  class="rounded-md text-sm text-gray-600 py-2 px-5 mr-10 font-normal hover:text-gray-800 cursor-pointer"
                >
                  Videos
                </li>
                <li
                  id="documents"
                  v-on:click="activeTab('documents')"
                  class="rounded-md text-sm text-gray-600 py-2 px-5 mr-10 font-normal cursor-pointer"
                >
                  Documents
                </li>
                <li
                  v-on:click="activeTab('shared')"
                  id="shared"
                  class="rounded-md text-sm text-gray-600 py-2 px-5 mr-10 font-normal hover:text-gray-800 cursor-pointer"
                >
                  Shared
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div v-if="imageTab" id="images_content">
        <div
          class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 shadow rounded mt-8"
        >
          <div
            class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <h2 class="w-1/2 text-gray-800 text-left text-lg">Recent Images</h2>
            <div
              class="w-full lg:w-1/2 flex flex-col lg:flex-row items-start lg:items-center lg:justify-end"
            >
              <div class="flex items-center">
                <a
                  class="text-gray-600 mx-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a
                  class="text-red-500 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
          >
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-1.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-2.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-3.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-4.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 shadow rounded mt-8"
        >
          <div
            class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <h2 class="w-1/2 text-gray-800 text-lg">Image Folders</h2>
            <div
              class="w-full lg:w-1/2 flex flex-col lg:flex-row items-start lg:items-center lg:justify-end"
            >
              <a>
                <div class="flex items-center">
                  <router-link to="/image-folder">
                    <a class="pr-4 text-sm underline text-blue-500">
                      View all folders
                    </a>
                  </router-link>
                  <a
                    class="text-white p-1 border-transparent border bg-blue-500 hover:bg-blue-600 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                    href="image-folders.html"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-plus"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" />
                      <line x1="12" y1="5" x2="12" y2="19" />
                      <line x1="5" y1="12" x2="19" y2="12" />
                    </svg>
                  </a>
                </div>
              </a>
            </div>
          </div>

          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
          >
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_1.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">Summer Retreat</h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_2.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">Campsite Shots</h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_3.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">
                  Content for Monday
                </h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_4.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">
                  Trip to Las Vegas
                </h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
          </div>
        </div>
        <div
          class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 shadow rounded mt-8"
        >
          <div
            class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <h2 class="w-1/2 text-gray-800 text-lg">Images</h2>
            <div
              class="w-full lg:w-1/2 flex flex-col lg:flex-row items-start lg:items-center lg:justify-end"
            >
              <div class="flex items-center">
                <a
                  class="text-gray-600 mx-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="text-gray-500 icon icon-tabler icon-tabler-share"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a
                  class="text-red-500 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
                <a
                  class="text-white p-1 border-transparent border bg-blue-500 hover:bg-blue-600 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-plus"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <line x1="12" y1="5" x2="12" y2="19" />
                    <line x1="5" y1="12" x2="19" y2="12" />
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
          >
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-5.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-6.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-7.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-8.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mt-6"
          >
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-9.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-10.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-11.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-12.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mt-6"
          >
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-13.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-14.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-15.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/images-16.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="controls transition duration-150 ease-in-out w-full bg-white py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <h5 class="text-gray-700 text-sm font-normal">
                  Boys will be boys.jpg
                </h5>
                <div class="flex justify-between items-end text-gray-500">
                  <p class="text-xs">2.8mb</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="videoTab" id="videos_content">
        <div
          class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 shadow rounded mt-8"
        >
          <div
            class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <h2 class="w-1/2 text-gray-800 text-left text-lg">Recent Videos</h2>
            <div
              class="w-full lg:w-1/2 flex flex-col lg:flex-row items-start lg:items-center lg:justify-end"
            >
              <div class="flex items-center">
                <a
                  class="text-gray-600 mx-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a
                  class="text-red-500 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
          >
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-1.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-2.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-3.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-4.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 shadow rounded mt-8"
        >
          <div
            class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <h2 class="w-1/2 text-gray-800 text-lg">Video Folders</h2>
            <div
              class="w-full lg:w-1/2 flex flex-col lg:flex-row items-start lg:items-center lg:justify-end"
            >
              <div class="flex items-center">
                <a class="text-blue-500 text-sm cursor-pointer mr-5 underline"
                  >View all folders</a
                >
                <a
                  class="text-white p-1 border-transparent border bg-blue-500 hover:bg-blue-600 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-plus"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <line x1="12" y1="5" x2="12" y2="19" />
                    <line x1="5" y1="12" x2="19" y2="12" />
                  </svg>
                </a>
              </div>
            </div>
          </div>

          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
          >
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_1.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">Summer Retreat</h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_2.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">Campsite Shots</h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_3.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">
                  Content for Monday
                </h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_4.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">
                  Trip to Las Vegas
                </h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
          </div>
        </div>
        <div
          class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 shadow rounded mt-8"
        >
          <div
            class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <h2 class="w-1/2 text-gray-800 text-lg">Videos</h2>
            <div
              class="w-full lg:w-1/2 flex flex-col lg:flex-row items-start lg:items-center lg:justify-end"
            >
              <div class="flex items-center">
                <a
                  class="text-gray-600 mx-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a
                  class="text-red-500 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
                <a
                  class="text-white p-1 border-transparent border bg-blue-500 hover:bg-blue-600 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-plus"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <line x1="12" y1="5" x2="12" y2="19" />
                    <line x1="5" y1="12" x2="19" y2="12" />
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
          >
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-1.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-2.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-3.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Always a dreamer.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-4.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mt-6"
          >
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-5.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-6.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-7.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-8.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mt-6"
          >
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-9.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-10.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-11.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="h-56 rounded relative trigger cursor-pointer">
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/videos-12.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="controls transition duration-150 ease-in-out flex items-center absolute top-0 right-0 mr-4 mt-4"
              >
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a class="text-white mr-3" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a class="text-white" href="javascript: void(0)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
              <div
                class="overlay transition duration-150 ease-in-out w-full bg-black bg-opacity-50 py-4 px-3 absolute bottom-0 left-0 right-0 shadow rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div class="flex justify-between items-start">
                    <svg
                      width="16px"
                      height="16px"
                      viewBox="0 0 16 16"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_videos"
                          transform="translate(-596.000000, -420.000000)"
                          fill-rule="nonzero"
                        >
                          <g
                            id="Group-22"
                            transform="translate(579.333333, 271.000000)"
                          >
                            <g id="Group-6">
                              <g id="Bitmap">
                                <g
                                  id="Group-24"
                                  transform="translate(0.666667, 123.000000)"
                                >
                                  <g
                                    id="Group-14"
                                    transform="translate(16.000000, 26.000000)"
                                  >
                                    <g id="Group-9">
                                      <g id="Group-37">
                                        <circle
                                          id="Oval"
                                          fill="#4299E1"
                                          cx="8"
                                          cy="8"
                                          r="8"
                                        ></circle>
                                        <path
                                          d="M6.00032209,4.85465093 L6.00032209,11.8110007 C5.99661348,11.876633 6.02994674,11.9389798 6.08716378,11.9734301 C6.14438082,12.0078804 6.21628771,12.0088986 6.27449969,11.9760827 L11.9103661,8.49790746 C11.9663672,8.46135182 12,8.39983937 12,8.3339723 C12,8.26810523 11.9663672,8.20659278 11.9103661,8.17003714 L6.27449969,4.69186195 C6.21681081,4.65807188 6.14474913,4.65828348 6.08726859,4.69241172 C6.02978804,4.72653996 5.99632399,4.78898274 6.00032209,4.85465093 L6.00032209,4.85465093 Z"
                                          id="Path"
                                          fill="#F2F2F2"
                                        ></path>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                    <div class="ml-2">
                      <h5 class="text-xs text-white font-normal">
                        Life is a party.mkv
                      </h5>
                      <div class="flex items-center">
                        <p class="text-xs text-gray-500">09m 02s</p>
                        <div
                          class="mx-1 w-1 h-1 rounded-full bg-gray-500"
                        ></div>
                        <p class="text-xs text-gray-500">100mb</p>
                      </div>
                    </div>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="controls flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="documentTab" id="docs_content">
        <div
          class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 shadow rounded mt-8"
        >
          <div
            class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <h2 class="w-1/2 text-gray-800 text-left text-lg">Recent Documents</h2>
            <div
              class="w-full lg:w-1/2 flex flex-col lg:flex-row items-start lg:items-center lg:justify-end"
            >
              <div class="flex items-center">
                <a
                  class="text-gray-600 mx-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a
                  class="text-red-500 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
          >
            <div
              class="h-56 border border-gray-300 rounded relative trigger cursor-pointer"
            >
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/documents-1.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="transition duration-150 ease-in-out w-full bg-gray-100 py-4 px-3 absolute bottom-0 left-0 right-0 rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div>
                    <h5 class="text-xs text-gray-700 font-normal">
                      Minutes of the meeting.docs
                    </h5>
                    <p class="text-gray-500 text-xs">
                      Last edited at <span class="text-blue-400">9:02</span> by
                      <span class="text-blue-400">John Doe</span>
                    </p>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="h-56 border border-gray-300 rounded relative trigger cursor-pointer"
            >
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/documents-2.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="transition duration-150 ease-in-out w-full bg-gray-100 py-4 px-3 absolute bottom-0 left-0 right-0 rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div>
                    <h5 class="text-xs text-gray-700 font-normal">
                      Minutes of the meeting.docs
                    </h5>
                    <p class="text-gray-500 text-xs">
                      Last edited at <span class="text-blue-400">9:02</span> by
                      <span class="text-blue-400">John Doe</span>
                    </p>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="h-56 border border-gray-300 rounded relative trigger cursor-pointer"
            >
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/documents-3.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="transition duration-150 ease-in-out w-full bg-gray-100 py-4 px-3 absolute bottom-0 left-0 right-0 rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div>
                    <h5 class="text-xs text-gray-700 font-normal">
                      Minutes of the meeting.docs
                    </h5>
                    <p class="text-gray-500 text-xs">
                      Last edited at <span class="text-blue-400">9:02</span> by
                      <span class="text-blue-400">John Doe</span>
                    </p>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="h-56 border border-gray-300 rounded relative trigger cursor-pointer"
            >
              <img
                loading="lazy"
                class="w-full h-full absolute inset-0 rounded object-cover object-center"
                src="../assets/images/documents-4.png"
              />
              <div
                class="cursor-pointer border border-white rounded-full w-4 h-4 absolute inset-0 ml-4 mt-4 m-auto"
              ></div>
              <div
                class="transition duration-150 ease-in-out w-full bg-gray-100 py-4 px-3 absolute bottom-0 left-0 right-0 rounded-b"
              >
                <div class="flex items-end justify-between text-gray-500">
                  <div>
                    <h5 class="text-xs text-gray-700 font-normal">
                      Minutes of the meeting.docs
                    </h5>
                    <p class="text-gray-500 text-xs">
                      Last edited at <span class="text-blue-400">9:02</span> by
                      <span class="text-blue-400">John Doe</span>
                    </p>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-dots"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="5" cy="12" r="1" />
                    <circle cx="12" cy="12" r="1" />
                    <circle cx="19" cy="12" r="1" />
                  </svg>
                </div>
                <div
                  class="flex items-center flex-no-wrap absolute top-0 right-0 -mt-2 mr-3"
                >
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 shadow rounded mt-8"
        >
          <div
            class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <h2 class="w-1/2 text-gray-800 text-lg">Video Folders</h2>
            <div
              class="w-full lg:w-1/2 flex flex-col lg:flex-row items-start lg:items-center lg:justify-end"
            >
              <div class="flex items-center">
                <a class="text-blue-500 text-sm cursor-pointer mr-5 underline"
                  >View all folders</a
                >
                <a
                  class="text-white p-1 border-transparent border bg-blue-500 hover:bg-blue-600 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-plus"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <line x1="12" y1="5" x2="12" y2="19" />
                    <line x1="5" y1="12" x2="19" y2="12" />
                  </svg>
                </a>
              </div>
            </div>
          </div>

          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
          >
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_1.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">Summer Retreat</h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_2.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">Campsite Shots</h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_3.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">
                  Content for Monday
                </h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_4.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <div class="flex items-start justify-between">
                <h5 class="text-sm text-gray-800 font-bold">
                  Trip to Las Vegas
                </h5>
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                    />
                  </div>
                </div>
              </div>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
            </div>
          </div>
        </div>
        <div class="w-full bg-white shadow rounded mt-8">
          <div class="w-full overflow-x-scroll xl:overflow-x-hidden">
            <h2 class="w-1/2 text-gray-800 text-lg py-3 sm:py-6 px-4 sm:px-8">
              Documents
            </h2>
            <table class="min-w-full bg-white">
              <thead>
                <tr class="w-full h-16 border-gray-300 border-b py-8">
                  <th
                    class="pl-8 text-gray-600 font-normal pr-6 text-left text-sm tracking-normal leading-4"
                  >
                    <input
                      type="checkbox"
                      class="cursor-pointer relative w-5 h-5 border rounded border-gray-400 bg-white outline-none"
                      onclick="checkAll(this)"
                    />
                  </th>
                  <th
                    class="text-gray-600 font-bold pr-6 text-left text-sm tracking-normal leading-4"
                  >
                    Name
                  </th>
                  <th
                    class="text-gray-600 font-bold pr-6 text-left text-sm tracking-normal leading-4"
                  >
                    Last edited
                  </th>
                  <th
                    class="text-gray-600 font-bold pr-6 text-left text-sm tracking-normal leading-4"
                  >
                    Created on
                  </th>
                  <th
                    class="text-gray-600 font-bold pr-6 text-left text-sm tracking-normal leading-4"
                  >
                    Shared
                  </th>
                  <td
                    class="opacity-0 pointer-events-none text-gray-600 font-normal pr-8 text-left text-sm tracking-normal leading-4"
                  >
                    More
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr class="h-24 border-gray-300 border-b">
                  <td
                    class="pl-8 pr-6 text-left whitespace-no-wrap text-sm text-gray-800 tracking-normal leading-4"
                  >
                    <input
                      type="checkbox"
                      class="cursor-pointer relative w-5 h-5 border rounded border-gray-400 bg-white outline-none"
                      onclick="tableInteract(this)"
                    />
                  </td>
                  <td class="pr-6 whitespace-no-wrap">
                    <div class="flex items-center">
                      <svg
                        width="27px"
                        height="24px"
                        viewBox="0 0 27 24"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="Page-1"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g
                            id="cms_file_manager_documents"
                            transform="translate(-360.000000, -913.000000)"
                            fill-rule="nonzero"
                          >
                            <g
                              id="Group-29"
                              transform="translate(275.000000, 777.000000)"
                            >
                              <g
                                id="Group-28"
                                transform="translate(0.000000, 85.000000)"
                              >
                                <g
                                  id="Group-14"
                                  transform="translate(0.000000, 49.000000)"
                                >
                                  <g
                                    id="Group-24"
                                    transform="translate(85.000000, 0.000000)"
                                  >
                                    <g
                                      id="icons8-microsoft-word-2019"
                                      transform="translate(0.000000, 2.000000)"
                                    >
                                      <path
                                        d="M25.504,0 L7.82933333,0 C7.18733333,0 6.66666667,0.520666667 6.66666667,1.16266667 L6.66666667,6.002 L26.6666667,6.002 L26.6666667,1.16266667 C26.6666667,0.520666667 26.146,0 25.504,0 Z"
                                        id="Path"
                                        fill="#2D92D4"
                                      ></path>
                                      <path
                                        d="M6.66666667,18.036 L6.66666667,22.8373333 C6.66666667,23.4793333 7.18733333,24 7.82866667,24 L25.504,24 C26.146,24 26.6666667,23.4793333 26.6666667,22.8373333 L26.6666667,18.036 L6.66666667,18.036 Z"
                                        id="Path"
                                        fill="#2150A9"
                                      ></path>
                                      <polygon
                                        id="Path"
                                        fill="#2D83D4"
                                        points="6.66666667 6.002 26.6666667 6.002 26.6666667 12.0033333 6.66666667 12.0033333"
                                      ></polygon>
                                      <polygon
                                        id="Path"
                                        fill="#2E70C9"
                                        points="6.66666667 12.0033333 26.6666667 12.0033333 26.6666667 18.0366667 6.66666667 18.0366667"
                                      ></polygon>
                                      <path
                                        d="M12.2126667,18.6666667 L1.12066667,18.6666667 C0.502,18.6666667 0,18.1646667 0,17.546 L0,6.454 C0,5.83533333 0.502,5.33333333 1.12066667,5.33333333 L12.2126667,5.33333333 C12.8313333,5.33333333 13.3333333,5.83533333 13.3333333,6.454 L13.3333333,17.546 C13.3333333,18.1646667 12.8313333,18.6666667 12.2126667,18.6666667 Z"
                                        id="Path"
                                        fill="#00488D"
                                      ></path>
                                      <polygon
                                        id="Path"
                                        fill="#FFFFFF"
                                        points="9.602 8.66666667 8.57133333 13.5093333 7.42933333 8.66666667 5.97133333 8.66666667 4.79333333 13.6593333 3.73133333 8.66666667 2.42733333 8.66666667 3.99 15.3333333 5.558 15.3333333 6.7 10.2073333 7.84266667 15.3333333 9.34333333 15.3333333 10.906 8.66666667"
                                      ></polygon>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <p
                        class="ml-2 text-gray-800 tracking-normal leading-4 text-sm"
                      >
                        Meeting remarks
                      </p>
                    </div>
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    John Doe on 9:02pm
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    9th January 2020
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    <div class="flex items-center flex-no-wrap">
                      <div class="w-6 h-6 bg-cover rounded-md">
                        <img
                          loading="lazy"
                          src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                          alt=""
                          class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                        />
                      </div>
                      <div class="w-6 h-6 bg-cover rounded-md -ml-2">
                        <img
                          loading="lazy"
                          src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                          alt=""
                          class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                        />
                      </div>
                      <div class="w-6 h-6 bg-cover rounded-md -ml-2">
                        <img
                          loading="lazy"
                          src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                          alt=""
                          class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                        />
                      </div>
                    </div>
                  </td>
                  <td class="pr-8 relative">
                    <div
                      class="dropdown-content mt-8 absolute left-0 -ml-12 shadow-md z-10 hidden w-32"
                    >
                      <ul class="bg-white shadow rounded py-1">
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Edit
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Delete
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Duplicate
                        </li>
                      </ul>
                    </div>
                    <button
                      class="text-gray-500 rounded cursor-pointer border border-transparent focus:outline-none"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        onclick="dropdownFunction(this)"
                        class="icon icon-tabler icon-tabler-dots"
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <circle cx="5" cy="12" r="1" />
                        <circle cx="12" cy="12" r="1" />
                        <circle cx="19" cy="12" r="1" />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr class="h-24 border-gray-300 border-b">
                  <td
                    class="pl-8 pr-6 text-left whitespace-no-wrap text-sm text-gray-800 tracking-normal leading-4"
                  >
                    <input
                      type="checkbox"
                      class="cursor-pointer relative w-5 h-5 border rounded border-gray-400 bg-white outline-none"
                      onclick="tableInteract(this)"
                    />
                  </td>
                  <td class="pr-6 whitespace-no-wrap">
                    <div class="flex items-center">
                      <svg
                        width="27px"
                        height="24px"
                        viewBox="0 0 27 24"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="Page-1"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g
                            id="cms_file_manager_documents"
                            transform="translate(-360.000000, -989.000000)"
                            fill-rule="nonzero"
                          >
                            <g
                              id="Group-29"
                              transform="translate(275.000000, 777.000000)"
                            >
                              <g
                                id="Group-28"
                                transform="translate(0.000000, 85.000000)"
                              >
                                <g
                                  id="Group-14-Copy-2"
                                  transform="translate(0.000000, 126.000000)"
                                >
                                  <g
                                    id="Group-24"
                                    transform="translate(85.000000, 0.000000)"
                                  >
                                    <g
                                      id="icons8-microsoft-excel-2019-(1)"
                                      transform="translate(-0.000000, 1.000000)"
                                    >
                                      <path
                                        d="M16.6666667,0 L7.82933333,0 C7.18733333,0 6.66666667,0.520666667 6.66666667,1.16266667 L6.66666667,6.002 L16.6666667,6.002 L16.6666667,0 Z"
                                        id="Path"
                                        fill="#169154"
                                      ></path>
                                      <path
                                        d="M6.66666667,18.036 L6.66666667,22.8373333 C6.66666667,23.4793333 7.18733333,24 7.82866667,24 L16.6666667,24 L16.6666667,18.036 L6.66666667,18.036 Z"
                                        id="Path"
                                        fill="#18482A"
                                      ></path>
                                      <polygon
                                        id="Path"
                                        fill="#0C8045"
                                        points="6.66666667 6.002 16.6666667 6.002 16.6666667 12.0033333 6.66666667 12.0033333"
                                      ></polygon>
                                      <polygon
                                        id="Path"
                                        fill="#17472A"
                                        points="6.66666667 12.0033333 16.6666667 12.0033333 16.6666667 18.0366667 6.66666667 18.0366667"
                                      ></polygon>
                                      <g
                                        id="Group"
                                        transform="translate(16.666667, 0.000000)"
                                      >
                                        <path
                                          d="M8.83733333,0 L0,0 L0,6.002 L10,6.002 L10,1.16266667 C10,0.520666667 9.47933333,0 8.83733333,0 Z"
                                          id="Path"
                                          fill="#29C27F"
                                        ></path>
                                        <path
                                          d="M0,18.036 L0,24 L8.838,24 C9.47933333,24 10,23.4793333 10,22.838 L10,18.0366667 L0,18.0366667 L0,18.036 Z"
                                          id="Path"
                                          fill="#27663F"
                                        ></path>
                                        <polygon
                                          id="Path"
                                          fill="#19AC65"
                                          points="0 6.002 10 6.002 10 12.0033333 0 12.0033333"
                                        ></polygon>
                                        <polygon
                                          id="Path"
                                          fill="#129652"
                                          points="0 12.0033333 10 12.0033333 10 18.0366667 0 18.0366667"
                                        ></polygon>
                                      </g>
                                      <path
                                        d="M12.2126667,18.6666667 L1.12066667,18.6666667 C0.502,18.6666667 0,18.1646667 0,17.546 L0,6.454 C0,5.83533333 0.502,5.33333333 1.12066667,5.33333333 L12.2126667,5.33333333 C12.8313333,5.33333333 13.3333333,5.83533333 13.3333333,6.454 L13.3333333,17.546 C13.3333333,18.1646667 12.8313333,18.6666667 12.2126667,18.6666667 Z"
                                        id="Path"
                                        fill="#0C7238"
                                      ></path>
                                      <polygon
                                        id="Path"
                                        fill="#FFFFFF"
                                        points="3.87133333 8.66666667 5.462 8.66666667 6.75266667 11.1693333 8.11666667 8.66666667 9.60266667 8.66666667 7.55533333 12 9.64933333 15.3333333 8.082 15.3333333 6.67533333 12.7133333 5.27466667 15.3333333 3.684 15.3333333 5.81266667 11.988"
                                      ></polygon>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <p
                        class="ml-2 text-gray-800 tracking-normal leading-4 text-sm"
                      >
                        Annual report
                      </p>
                    </div>
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    John Doe on 9:02pm
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    9th January 2020
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    <div class="flex items-center flex-no-wrap">
                      <div class="w-6 h-6 bg-cover rounded-md">
                        <img
                          loading="lazy"
                          src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                          alt=""
                          class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                        />
                      </div>
                      <div class="w-6 h-6 bg-cover rounded-md -ml-2">
                        <img
                          loading="lazy"
                          src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                          alt=""
                          class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                        />
                      </div>
                    </div>
                  </td>
                  <td class="pr-8 relative">
                    <button
                      class="text-gray-500 rounded cursor-pointer border border-transparent focus:outline-none"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon icon-tabler icon-tabler-dots"
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <circle cx="5" cy="12" r="1" />
                        <circle cx="12" cy="12" r="1" />
                        <circle cx="19" cy="12" r="1" />
                      </svg>
                    </button>
                    <div
                      class="dropdown-content mt-1 absolute left-0 -ml-12 shadow-md z-10 hidden w-32"
                    >
                      <ul class="bg-white shadow rounded py-1">
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Edit
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Delete
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Duplicate
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <tr class="h-24 border-gray-300 border-b">
                  <td
                    class="pl-8 pr-6 text-left whitespace-no-wrap text-sm text-gray-800 tracking-normal leading-4"
                  >
                    <input
                      type="checkbox"
                      class="cursor-pointer relative w-5 h-5 border rounded border-gray-400 bg-white outline-none"
                      onclick="tableInteract(this)"
                    />
                  </td>
                  <td class="pr-6 whitespace-no-wrap">
                    <div class="flex items-center">
                      <svg
                        width="27px"
                        height="24px"
                        viewBox="0 0 27 24"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="Page-1"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g
                            id="cms_file_manager_documents"
                            transform="translate(-360.000000, -1063.000000)"
                            fill-rule="nonzero"
                          >
                            <g
                              id="icons8-microsoft-powerpoint-2019-(2)"
                              transform="translate(360.000000, 1063.000000)"
                            >
                              <path
                                d="M2.7,12 C2.7,18.6273333 8.139825,24 14.85,24 C21.560175,24 27,18.6273333 27,12 L14.85,12 L2.7,12 Z"
                                id="Path"
                                fill="#DC4C2C"
                              ></path>
                              <path
                                d="M14.85,0 L14.85,12 L27,12 C27,5.37266667 21.560175,0 14.85,0 Z"
                                id="Path"
                                fill="#F7A278"
                              ></path>
                              <path
                                d="M14.85,0 C8.139825,0 2.7,5.37266667 2.7,12 L14.85,12 L14.85,0 Z"
                                id="Path"
                                fill="#C06346"
                              ></path>
                              <path
                                d="M12.365325,18.6666667 L1.134675,18.6666667 C0.508275,18.6666667 0,18.1646667 0,17.546 L0,6.454 C0,5.83533333 0.508275,5.33333333 1.134675,5.33333333 L12.365325,5.33333333 C12.991725,5.33333333 13.5,5.83533333 13.5,6.454 L13.5,17.546 C13.5,18.1646667 12.991725,18.6666667 12.365325,18.6666667 Z"
                                id="Path"
                                fill="#9B341F"
                              ></path>
                              <path
                                d="M7.204275,8.67466667 L4.05,8.67466667 L4.05,15.3413333 L5.4162,15.3413333 L5.4162,12.994 L6.9525,12.994 C8.2188,12.994 9.245475,11.98 9.245475,10.7293333 L9.245475,10.6906667 C9.245475,9.57733333 8.331525,8.67466667 7.204275,8.67466667 Z M7.80975,10.9053333 C7.80975,11.478 7.339275,11.9426667 6.75945,11.9426667 L5.4162,11.9426667 L5.4162,9.726 L6.75945,9.726 C7.339275,9.726 7.80975,10.1906667 7.80975,10.7633333 L7.80975,10.9053333 Z"
                                id="Shape"
                                fill="#FFFFFF"
                              ></path>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <p
                        class="ml-2 text-gray-800 tracking-normal leading-4 text-sm"
                      >
                        Pitch deck
                      </p>
                    </div>
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    John Doe on 9:02pm
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    9th January 2020
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    <div class="flex items-center flex-no-wrap">
                      <div class="w-6 h-6 bg-cover rounded-md">
                        <img
                          loading="lazy"
                          src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                          alt=""
                          class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                        />
                      </div>
                      <div class="w-6 h-6 bg-cover rounded-md -ml-2">
                        <img
                          loading="lazy"
                          src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                          alt=""
                          class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                        />
                      </div>
                      <div class="w-6 h-6 bg-cover rounded-md -ml-2">
                        <img
                          loading="lazy"
                          src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                          alt=""
                          class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                        />
                      </div>
                    </div>
                  </td>
                  <td class="pr-8 relative">
                    <button
                      class="text-gray-500 rounded cursor-pointer border border-transparent focus:outline-none"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon icon-tabler icon-tabler-dots"
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <circle cx="5" cy="12" r="1" />
                        <circle cx="12" cy="12" r="1" />
                        <circle cx="19" cy="12" r="1" />
                      </svg>
                    </button>
                    <div
                      class="dropdown-content mt-1 absolute left-0 -ml-12 shadow-md z-10 hidden w-32"
                    >
                      <ul class="bg-white shadow rounded py-1">
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Edit
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Delete
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Duplicate
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <tr class="h-24 border-gray-300 border-b">
                  <td
                    class="pl-8 pr-6 text-left whitespace-no-wrap text-sm text-gray-800 tracking-normal leading-4"
                  >
                    <input
                      type="checkbox"
                      class="cursor-pointer relative w-5 h-5 border rounded border-gray-400 bg-white outline-none"
                      onclick="tableInteract(this)"
                    />
                  </td>
                  <td class="pr-6 whitespace-no-wrap">
                    <div class="flex items-center">
                      <svg
                        width="27px"
                        height="24px"
                        viewBox="0 0 27 24"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="Page-1"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g
                            id="cms_file_manager_documents"
                            transform="translate(-358.000000, -1213.000000)"
                          >
                            <image
                              id="Bitmap"
                              x="358"
                              y="1213"
                              width="27"
                              height="24"
                              xlink:href=""
                            ></image>
                          </g>
                        </g>
                      </svg>
                      <p
                        class="ml-2 text-gray-800 tracking-normal leading-4 text-sm"
                      >
                        Entity relationship
                      </p>
                    </div>
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    John Doe on 9:02pm
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    9th January 2020
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    <svg
                      class="cursor-pointer"
                      width="24px"
                      height="24px"
                      viewBox="0 0 34 34"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <defs>
                        <circle id="path-1" cx="12" cy="12" r="12"></circle>
                        <filter
                          x="-33.3%"
                          y="-25.0%"
                          width="166.7%"
                          height="166.7%"
                          filterUnits="objectBoundingBox"
                          id="filter-3"
                        >
                          <feMorphology
                            radius="1"
                            operator="dilate"
                            in="SourceAlpha"
                            result="shadowSpreadOuter1"
                          ></feMorphology>
                          <feOffset
                            dx="0"
                            dy="2"
                            in="shadowSpreadOuter1"
                            result="shadowOffsetOuter1"
                          ></feOffset>
                          <feGaussianBlur
                            stdDeviation="2"
                            in="shadowOffsetOuter1"
                            result="shadowBlurOuter1"
                          ></feGaussianBlur>
                          <feComposite
                            in="shadowBlurOuter1"
                            in2="SourceAlpha"
                            operator="out"
                            result="shadowBlurOuter1"
                          ></feComposite>
                          <feColorMatrix
                            values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0"
                            type="matrix"
                            in="shadowBlurOuter1"
                          ></feColorMatrix>
                        </filter>
                      </defs>
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_documents"
                          transform="translate(-1247.000000, -1133.000000)"
                        >
                          <g
                            id="Group-29"
                            transform="translate(275.000000, 777.000000)"
                          >
                            <g
                              id="Group-28"
                              transform="translate(0.000000, 85.000000)"
                            >
                              <g
                                id="Group-19"
                                transform="translate(0.000000, 274.000000)"
                              >
                                <g id="Group-14-Copy-4">
                                  <g
                                    id="Group-24"
                                    transform="translate(123.000000, 0.000000)"
                                  >
                                    <g
                                      id="Group-21-Copy-9"
                                      transform="translate(854.000000, 0.000000)"
                                    >
                                      <g id="a_4_1-copy-11">
                                        <mask id="mask-2" fill="white">
                                          <use xlink:href="#path-1"></use>
                                        </mask>
                                        <g id="Mask">
                                          <use
                                            fill="black"
                                            fill-opacity="1"
                                            filter="url(#filter-3)"
                                            xlink:href="#path-1"
                                          ></use>
                                          <circle
                                            stroke="#CBD5E0"
                                            stroke-width="1"
                                            fill="#FFFFFF"
                                            fill-rule="evenodd"
                                            cx="12"
                                            cy="12"
                                            r="12.5"
                                          ></circle>
                                        </g>
                                        <g id="Group" mask="url(#mask-2)">
                                          <g
                                            transform="translate(4.000000, 4.000000)"
                                            id="Path"
                                          >
                                            <polygon
                                              stroke="none"
                                              points="0 0 16 0 16 16 0 16"
                                            ></polygon>
                                            <line
                                              x1="8"
                                              y1="3.33333333"
                                              x2="8"
                                              y2="12.6666667"
                                              stroke="#CBD5E0"
                                              stroke-width="1.5"
                                              stroke-linecap="round"
                                              stroke-linejoin="round"
                                            ></line>
                                            <line
                                              x1="3.33333333"
                                              y1="8"
                                              x2="12.6666667"
                                              y2="8"
                                              stroke="#CBD5E0"
                                              stroke-width="1.5"
                                              stroke-linecap="round"
                                              stroke-linejoin="round"
                                            ></line>
                                          </g>
                                        </g>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </td>
                  <td class="pr-8 relative">
                    <button
                      class="text-gray-500 rounded cursor-pointer border border-transparent focus:outline-none"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon icon-tabler icon-tabler-dots"
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <circle cx="5" cy="12" r="1" />
                        <circle cx="12" cy="12" r="1" />
                        <circle cx="19" cy="12" r="1" />
                      </svg>
                    </button>
                    <div
                      class="dropdown-content mt-1 absolute left-0 -ml-12 shadow-md z-10 hidden w-32"
                    >
                      <ul class="bg-white shadow rounded py-1">
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Edit
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Delete
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Duplicate
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <tr class="h-24 border-gray-300 border-b">
                  <td
                    class="pl-8 pr-6 text-left whitespace-no-wrap text-sm text-gray-800 tracking-normal leading-4"
                  >
                    <input
                      type="checkbox"
                      class="cursor-pointer relative w-5 h-5 border rounded border-gray-400 bg-white outline-none"
                      onclick="tableInteract(this)"
                    />
                  </td>
                  <td class="pr-6 whitespace-no-wrap">
                    <div class="flex items-center">
                      <svg
                        width="24px"
                        height="24px"
                        viewBox="0 0 24 24"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="Page-1"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g
                            id="cms_file_manager_documents"
                            transform="translate(-360.000000, -1137.000000)"
                            fill-rule="nonzero"
                          >
                            <g
                              id="Group-29"
                              transform="translate(275.000000, 777.000000)"
                            >
                              <g
                                id="Group-28"
                                transform="translate(0.000000, 85.000000)"
                              >
                                <g
                                  id="Group-19"
                                  transform="translate(0.000000, 274.000000)"
                                >
                                  <g
                                    id="icons8-microsoft-access"
                                    transform="translate(85.000000, 1.000000)"
                                  >
                                    <path
                                      d="M17.6666667,4.66666667 C14.2,4.66666667 11.3333333,5.4 11.3333333,6.66666667 L11.3333333,18.6666667 C11.3333333,19.8666667 14.2,20.6666667 17.6666667,20.6666667 C21.1333333,20.6666667 24,19.8666667 24,18.6666667 L24,18.6666667 L24,6.73333333 C24,5.46666667 21.1333333,4.66666667 17.6666667,4.66666667 Z"
                                      id="Path"
                                      fill="#FF80AB"
                                    ></path>
                                    <path
                                      d="M24,11 L24,12.6666667 C22.2666667,13.9333333 18.9333333,14 17.6666667,14 C16.4,14 13.2,13.8666667 11.3333333,12.8666667 L11.3333333,11 C11.3333333,11.9333333 14.2,12.6666667 17.6666667,12.6666667 C21.1333333,12.6666667 24,11.9333333 24,11 Z M17.6666667,8.66666667 C14.2,8.66666667 11.3333333,7.93333333 11.3333333,7 L11.3333333,8.86666667 C13.2,9.86666667 16.4,10 17.6666667,10 C18.9333333,10 22.2666667,9.93333333 24,8.66666667 L24,7 C24,7.93333333 21.1333333,8.66666667 17.6666667,8.66666667 Z M17.6666667,16.6666667 C14.2,16.6666667 11.3333333,15.9333333 11.3333333,15 L11.3333333,16.8666667 C13.2,17.8666667 16.4,18 17.6666667,18 C18.9333333,18 22.2,17.8666667 24,16.6666667 L24,15 C24,15.9333333 21.1333333,16.6666667 17.6666667,16.6666667 Z"
                                      id="Shape"
                                      fill="#EC407A"
                                    ></path>
                                    <polygon
                                      id="Path"
                                      fill="#C51162"
                                      points="14 24 0 21.3333333 0 2.66666667 14 0"
                                    ></polygon>
                                    <path
                                      d="M7.6,7 C6.86666667,7.06666667 6.13333333,7.13333333 5.4,7.13333333 C4.46666667,10.4666667 3.53333333,13.8 2.66666667,17.1333333 C3.26666667,17.2 3.86666667,17.2 4.46666667,17.2666667 C4.66666667,16.5333333 4.86666667,15.8 5,15 C5.93333333,15.0666667 6.93333333,15.0666667 7.86666667,15.0666667 C8.06666667,15.8666667 8.26666667,16.6666667 8.46666667,17.4666667 C9.2,17.5333333 9.86666667,17.6 10.6,17.6666667 C9.66666667,14.1333333 8.66666667,10.5333333 7.6,7 Z M5.46666667,13.3333333 C5.8,11.8666667 6.26666667,10.4 6.46666667,8.86666667 C6.73333333,10.4 7.2,11.8 7.53333333,13.3333333 C6.8,13.3333333 6.13333333,13.3333333 5.46666667,13.3333333 Z"
                                      id="Shape"
                                      fill="#FFFFFF"
                                    ></path>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <p
                        class="ml-2 text-gray-800 tracking-normal leading-4 text-sm"
                      >
                        TUK webapp
                      </p>
                    </div>
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    John Doe on 9:02pm
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    9th January 2020
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    <svg
                      class="cursor-pointer"
                      width="24px"
                      height="24px"
                      viewBox="0 0 34 34"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <defs>
                        <circle id="path-1" cx="12" cy="12" r="12"></circle>
                        <filter
                          x="-33.3%"
                          y="-25.0%"
                          width="166.7%"
                          height="166.7%"
                          filterUnits="objectBoundingBox"
                          id="filter-3"
                        >
                          <feMorphology
                            radius="1"
                            operator="dilate"
                            in="SourceAlpha"
                            result="shadowSpreadOuter1"
                          ></feMorphology>
                          <feOffset
                            dx="0"
                            dy="2"
                            in="shadowSpreadOuter1"
                            result="shadowOffsetOuter1"
                          ></feOffset>
                          <feGaussianBlur
                            stdDeviation="2"
                            in="shadowOffsetOuter1"
                            result="shadowBlurOuter1"
                          ></feGaussianBlur>
                          <feComposite
                            in="shadowBlurOuter1"
                            in2="SourceAlpha"
                            operator="out"
                            result="shadowBlurOuter1"
                          ></feComposite>
                          <feColorMatrix
                            values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0"
                            type="matrix"
                            in="shadowBlurOuter1"
                          ></feColorMatrix>
                        </filter>
                      </defs>
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g
                          id="cms_file_manager_documents"
                          transform="translate(-1247.000000, -1133.000000)"
                        >
                          <g
                            id="Group-29"
                            transform="translate(275.000000, 777.000000)"
                          >
                            <g
                              id="Group-28"
                              transform="translate(0.000000, 85.000000)"
                            >
                              <g
                                id="Group-19"
                                transform="translate(0.000000, 274.000000)"
                              >
                                <g id="Group-14-Copy-4">
                                  <g
                                    id="Group-24"
                                    transform="translate(123.000000, 0.000000)"
                                  >
                                    <g
                                      id="Group-21-Copy-9"
                                      transform="translate(854.000000, 0.000000)"
                                    >
                                      <g id="a_4_1-copy-11">
                                        <mask id="mask-2" fill="white">
                                          <use xlink:href="#path-1"></use>
                                        </mask>
                                        <g id="Mask">
                                          <use
                                            fill="black"
                                            fill-opacity="1"
                                            filter="url(#filter-3)"
                                            xlink:href="#path-1"
                                          ></use>
                                          <circle
                                            stroke="#CBD5E0"
                                            stroke-width="1"
                                            fill="#FFFFFF"
                                            fill-rule="evenodd"
                                            cx="12"
                                            cy="12"
                                            r="12.5"
                                          ></circle>
                                        </g>
                                        <g id="Group" mask="url(#mask-2)">
                                          <g
                                            transform="translate(4.000000, 4.000000)"
                                            id="Path"
                                          >
                                            <polygon
                                              stroke="none"
                                              points="0 0 16 0 16 16 0 16"
                                            ></polygon>
                                            <line
                                              x1="8"
                                              y1="3.33333333"
                                              x2="8"
                                              y2="12.6666667"
                                              stroke="#CBD5E0"
                                              stroke-width="1.5"
                                              stroke-linecap="round"
                                              stroke-linejoin="round"
                                            ></line>
                                            <line
                                              x1="3.33333333"
                                              y1="8"
                                              x2="12.6666667"
                                              y2="8"
                                              stroke="#CBD5E0"
                                              stroke-width="1.5"
                                              stroke-linecap="round"
                                              stroke-linejoin="round"
                                            ></line>
                                          </g>
                                        </g>
                                      </g>
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </td>
                  <td class="pr-8 relative">
                    <button
                      class="text-gray-500 rounded cursor-pointer border border-transparent focus:outline-none"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon icon-tabler icon-tabler-dots"
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <circle cx="5" cy="12" r="1" />
                        <circle cx="12" cy="12" r="1" />
                        <circle cx="19" cy="12" r="1" />
                      </svg>
                    </button>
                    <div
                      class="dropdown-content mt-1 absolute left-0 -ml-12 shadow-md z-10 hidden w-32"
                    >
                      <ul class="bg-white shadow rounded py-1">
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Edit
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Delete
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Duplicate
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <tr class="h-24 border-gray-300 border-b">
                  <td
                    class="pl-8 pr-6 text-left whitespace-no-wrap text-sm text-gray-800 tracking-normal leading-4"
                  >
                    <input
                      type="checkbox"
                      class="cursor-pointer relative w-5 h-5 border rounded border-gray-400 bg-white outline-none"
                      onclick="tableInteract(this)"
                    />
                  </td>
                  <td class="pr-6 whitespace-no-wrap">
                    <div class="flex items-center">
                      <svg
                        width="24px"
                        height="23px"
                        viewBox="0 0 24 23"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                      >
                        <g
                          id="Page-1"
                          stroke="none"
                          stroke-width="1"
                          fill="none"
                          fill-rule="evenodd"
                        >
                          <g
                            id="cms_file_manager_documents"
                            transform="translate(-359.000000, -1287.000000)"
                          >
                            <g
                              id="Group-29"
                              transform="translate(275.000000, 777.000000)"
                            >
                              <g
                                id="Group-28"
                                transform="translate(0.000000, 85.000000)"
                              >
                                <image
                                  id="Bitmap"
                                  x="84.4725944"
                                  y="425.11084"
                                  width="23.3861145"
                                  height="23.3861145"
                                  xlink:href=""
                                ></image>
                              </g>
                            </g>
                          </g>
                        </g>
                      </svg>
                      <p
                        class="ml-2 text-gray-800 tracking-normal leading-4 text-sm"
                      >
                        Hi-Fi prototype
                      </p>
                    </div>
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    John Doe on 9:02pm
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    9th January 2020
                  </td>
                  <td
                    class="text-sm pr-6 whitespace-no-wrap text-gray-800 tracking-normal leading-4"
                  >
                    <div class="flex items-center flex-no-wrap">
                      <div class="w-6 h-6 bg-cover rounded-md">
                        <img
                          loading="lazy"
                          src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                          alt=""
                          class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white shadow"
                        />
                      </div>
                      <div class="w-6 h-6 bg-cover rounded-md -ml-2">
                        <img
                          loading="lazy"
                          src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                          alt=""
                          class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                        />
                      </div>
                      <div class="w-6 h-6 bg-cover rounded-md -ml-2">
                        <img
                          loading="lazy"
                          src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                          alt=""
                          class="h-full w-full overflow-hidden object-cover object-center rounded-full border-2 border-white shadow"
                        />
                      </div>
                    </div>
                  </td>
                  <td class="pr-8 relative">
                    <button
                      class="text-gray-500 rounded cursor-pointer border border-transparent focus:outline-none"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon icon-tabler icon-tabler-dots"
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <circle cx="5" cy="12" r="1" />
                        <circle cx="12" cy="12" r="1" />
                        <circle cx="19" cy="12" r="1" />
                      </svg>
                    </button>
                    <div
                      class="dropdown-content mt-1 absolute left-0 -ml-12 shadow-md z-10 hidden w-32"
                    >
                      <ul class="bg-white shadow rounded py-1">
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Edit
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Delete
                        </li>
                        <li
                          class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-3 hover:bg-indigo-700 hover:text-white px-3 font-normal"
                        >
                          Duplicate
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div v-if="sharedTab" id="shared_content">
        <div
          class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 shadow rounded mt-8"
        >
          <div
            class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <h2 class="w-1/2 text-gray-800 text-left text-lg">Recently Shared With</h2>
            <div
              class="w-full lg:w-1/2 flex flex-col lg:flex-row items-start lg:items-center lg:justify-end"
            >
              <div class="flex items-center">
                <a
                  class="text-gray-600 mx-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                    <polyline points="7 11 12 16 17 11" />
                    <line x1="12" y1="4" x2="12" y2="16" />
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <rect x="3" y="4" width="18" height="4" rx="2" />
                    <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                    <line x1="10" y1="12" x2="14" y2="12" />
                  </svg>
                </a>
                <a
                  class="text-red-500 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
          >
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-1.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    Peter Quinn
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">
                    Senior Engineer
                  </p>
                  <p class="text-blue-500 text-xs font-normal">
                    Jackson-teller@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-2.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    Nicolas Brody
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">
                    Senior UI Designer
                  </p>
                  <p class="text-blue-500 text-xs font-normal">
                    Jackson-teller@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-3.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    Joseph Bing
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">
                    Marketing Manager
                  </p>
                  <p class="text-blue-500 text-xs font-normal">
                    Jackson-teller@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-8.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    Phoebe Geller
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">
                    Senior UX Designer
                  </p>
                  <p class="text-blue-500 text-xs font-normal">
                    Jackson-teller@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 shadow rounded mt-8"
        >
          <div
            class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <h2 class="w-1/2 text-gray-800 text-lg">Shared Folders</h2>
            <div
              class="w-full lg:w-1/2 flex flex-col lg:flex-row items-start lg:items-center lg:justify-end"
            >
              <div class="flex items-center">
                <a class="text-blue-500 text-sm cursor-pointer mr-5 underline"
                  >View all folders</a
                >
                <a
                  class="text-white p-1 border-transparent border bg-blue-500 hover:bg-blue-600 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-plus"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <line x1="12" y1="5" x2="12" y2="19" />
                    <line x1="5" y1="12" x2="19" y2="12" />
                  </svg>
                </a>
              </div>
            </div>
          </div>

          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
          >
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_1.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <h5 class="text-sm text-gray-800 font-bold">Summer Retreat</h5>
              <p class="text-xs text-gray-800 font-medium">15 images</p>
              <div class="flex items-center mt-2">
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_2.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                </div>
                <p class="ml-1 text-xs text-gray-600">+3 others</p>
              </div>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_2.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <h5 class="text-sm text-gray-800 font-bold">Summer Retreat</h5>
              <p class="text-xs text-gray-800 font-medium">22 documents</p>
              <div class="flex items-center mt-2">
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_3.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <h5 class="text-sm text-gray-800 font-bold">Summer Retreat</h5>
              <p class="text-xs text-gray-800 font-medium">25 images</p>
              <div class="flex items-center mt-2">
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="rounded border-gray-400 border p-4">
              <div class="flex items-start justify-between mb-3">
                <img
                  loading="lazy"
                  class="w-8"
                  src="../assets/images/images_folder_4.png"
                  alt="Image folder"
                />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="text-gray-500 icon icon-tabler icon-tabler-dots"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" />
                  <circle cx="5" cy="12" r="1" />
                  <circle cx="12" cy="12" r="1" />
                  <circle cx="19" cy="12" r="1" />
                </svg>
              </div>
              <h5 class="text-sm text-gray-800 font-bold">Summer Retreat</h5>
              <p class="text-xs text-gray-800 font-medium">03 videos</p>
              <div class="flex items-center mt-2">
                <div class="flex items-center flex-no-wrap">
                  <div class="w-5 h-5 bg-cover rounded-md">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_4.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_2.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_1.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                  <div class="w-5 h-5 bg-cover rounded-md -ml-2">
                    <img
                      loading="lazy"
                      src="https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_4_3.png"
                      alt=""
                      class="h-full w-full overflow-hidden object-cover object-center rounded-full border border-white shadow"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="w-full bg-white py-3 sm:py-6 px-4 sm:px-8 shadow rounded mt-8"
        >
          <div
            class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <h2 class="w-1/2 text-gray-800 text-lg">Shared Contacts</h2>
            <div
              class="w-full lg:w-1/2 flex flex-col lg:flex-row items-start lg:items-center lg:justify-end"
            >
              <div class="flex items-center">
                <a
                  class="text-gray-600 mx-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-share"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <circle cx="6" cy="12" r="3"></circle>
                    <circle cx="18" cy="6" r="3"></circle>
                    <circle cx="18" cy="18" r="3"></circle>
                    <line x1="8.7" y1="10.7" x2="15.3" y2="7.3"></line>
                    <line x1="8.7" y1="13.3" x2="15.3" y2="16.7"></line>
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-download"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
                    <polyline points="7 11 12 16 17 11"></polyline>
                    <line x1="12" y1="4" x2="12" y2="16"></line>
                  </svg>
                </a>
                <a
                  class="text-gray-600 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-archive"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke=" currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <rect x="3" y="4" width="18" height="4" rx="2"></rect>
                    <path
                      d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10"
                    ></path>
                    <line x1="10" y1="12" x2="14" y2="12"></line>
                  </svg>
                </a>
                <a
                  class="text-red-500 mr-2 p-2 border-transparent border bg-gray-100 hover:bg-gray-200 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon cursor-pointer icon-tabler icon-tabler-trash"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="4" y1="7" x2="20" y2="7"></line>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                    <path
                      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                    ></path>
                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                  </svg>
                </a>
                <a
                  class="text-white p-1 border-transparent border bg-blue-500 hover:bg-blue-600 cursor-pointer rounded focus:outline-none focus:border-gray-800 focus:shadow-outline-gray"
                  href="javascript: void(0)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-plus"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z"></path>
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
          >
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-5.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    Jackson Teller
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">
                    Senior UX Designer
                  </p>
                  <p class="text-blue-500 text-xs font-normal">
                    Jackson-teller@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-6.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    George Clay
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">
                    Head of Finance
                  </p>
                  <p class="text-blue-500 text-xs font-normal">
                    Jackson-teller@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-7.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    Rachel Green
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">
                    Executive Procurement
                  </p>
                  <p class="text-blue-500 text-xs font-normal">
                    Jackson-teller@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-8.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    Jasmine Buffay
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">UI Designer</p>
                  <p class="text-blue-500 text-xs font-normal">
                    jasmine-buffay@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
          </div>
          <div
            class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mt-6"
          >
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-9.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    Wilson Clark
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">
                    Lead Developer
                  </p>
                  <p class="text-blue-500 text-xs font-normal">
                    Jackson-teller@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-10.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    Samantha Ray
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">
                    Senior UI Designer
                  </p>
                  <p class="text-blue-500 text-xs font-normal">
                    Jackson-teller@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-11.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    John McDonald
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">HR Manager</p>
                  <p class="text-blue-500 text-xs font-normal">
                    Jackson-teller@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
            <div
              class="rounded relative trigger cursor-pointer px-4 py-5 border border-gray-300"
            >
              <div class="flex items-center">
                <div class="w-16 h-16 rounded shadow">
                  <img
                    class="w-full h-full overflow-hidden object-cover rounded"
                    src="../assets/images/shared-12.png"
                    alt="logo"
                  />
                </div>
                <div class="ml-2">
                  <h5 class="text-gray-700 font-normal text-base">
                    Ashley Wilson
                  </h5>
                  <p class="text-gray-600 text-xs font-normal">
                    Product Design Intern
                  </p>
                  <p class="text-blue-500 text-xs font-normal">
                    Jackson-teller@gmail.com
                  </p>
                </div>
              </div>
              <div class="flex items-center justify-between mt-6 mb-8">
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    82
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Images
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    42
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Docs
                  </p>
                </div>
                <div>
                  <h2
                    class="text-gray-600 font-bold text-lg leading-6 mb-1 text-center"
                  >
                    28
                  </h2>
                  <p class="text-gray-800 text-sm leading-5 text-center">
                    Videos
                  </p>
                </div>
              </div>
              <div class="w-full flex items-center justify-center px-3">
                <button
                  class="w-full transition duration-150 ease-in-out bg-gray-200 text-blue-500 py-3 flex justify-center items-center text-sm rounded"
                >
                  View all shared items
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data: function () {
    return {
      menu: true,
      imageTab: true,
      videoTab: false,
      documentTab: false,
      sharedTab: false,
    };
  },
  methods: {
    // Tabs script starts here
    activeTab(val) {
      if (val === "images") {
        this.imageTab = true;
        this.videoTab = false;
        this.documentTab = false;
        this.sharedTab = false;
        let x = document.getElementById("images");
        document.getElementById("videos").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        document.getElementById("documents").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        document.getElementById("shared").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        x.style.backgroundColor = "white";
      } else if (val === "videos") {
        this.imageTab = false;
        this.videoTab = true;
        this.documentTab = false;
        this.sharedTab = false;
        let x = document.getElementById("videos");
        document.getElementById("images").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        document.getElementById("documents").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        document.getElementById("shared").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        x.style.backgroundColor = "white";
      } else if (val === "documents") {
        this.imageTab = false;
        this.videoTab = false;
        this.documentTab = true;
        this.sharedTab = false;
        let x = document.getElementById("documents");
        document.getElementById("images").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        document.getElementById("videos").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        document.getElementById("shared").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        x.style.backgroundColor = "white";
      } else if (val === "shared") {
        this.imageTab = false;
        this.videoTab = false;
        this.documentTab = false;
        this.sharedTab = true;
        let x = document.getElementById("shared");
        document.getElementById("images").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        document.getElementById("videos").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        document.getElementById("documents").style.backgroundColor =
          "rgba(243,244,246,var(--tw-bg-opacity))";
        x.style.backgroundColor = "white";
      }
    },
    sidebarHandler() {
      this.menu = !this.menu;
      let single = document.getElementById("menuList");
      single.classList.toggle("hidden");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css");
body {
  font-family: "Lato", sans-serif;
}
/* shows controls on hover */
.controls {
  opacity: 0;
}
.trigger:hover .controls {
  opacity: 1;
}
.trigger:hover .overlay {
  --bg-opacity: 0.75;
}
/* Checkbox */
.checkbox:checked {
  /* Apply class right-0*/
  right: 0;
}
.checkbox:checked + .toggle-label {
  /* Apply class bg-indigo-700 */
  background-color: #4299e1;
}

.divcolor {
  background-color: #4299e1;
}
.buttoncolor {
  background-color: #667eea;
}
.text-color {
  color: #4a5568;
}
.height {
  height: 0.313rem;
}
</style>

